import React, { useEffect } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Alert } from 'react-native';
import { DrawerContentScrollView, DrawerItemList } from '@react-navigation/drawer';
import { useDispatch, useSelector } from 'react-redux';
import { logout } from '../store/userSlice';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { switchLanguage, getCurrentLanguage, t } from '../utils/i18n';

const CustomDrawerContent = (props) => {
  const dispatch = useDispatch();
  const userInfo = useSelector(state => state.user.userInfo);
  
  // 语言选项
  const languages = [
    { code: 'zh', name: t('chinese') },
    { code: 'en', name: t('english') }
  ];
  
  // 当前语言（默认中文）
  const [currentLanguage, setCurrentLanguage] = React.useState(getCurrentLanguage());

  // 监听语言变化
  useEffect(() => {
    setCurrentLanguage(getCurrentLanguage());
  }, []);

  // 切换语言
  const handleSwitchLanguage = async (languageCode) => {
    setCurrentLanguage(languageCode);
    await switchLanguage(languageCode);
    Alert.alert(t('success'), `${t('languageSettings')}${t('success')}`);
  };

  const handleLogout = () => {
    dispatch(logout());
    props.navigation.reset({
      index: 0,
      routes: [{ name: 'Login' }],
    });
  };

  return (
    <DrawerContentScrollView {...props} contentContainerStyle={styles.drawerContainer}>
      <View style={styles.header}>
        <Text style={styles.username}>{userInfo?.name || '用户'}</Text>
      </View>
      
      <View style={styles.drawerItems}>
        <DrawerItemList {...props} />
      </View>
      
      <View style={styles.languageSection}>
        <Text style={styles.sectionTitle}>{t('languageSettings')}</Text>
        {languages.map((language) => (
          <TouchableOpacity
            key={language.code}
            style={[
              styles.languageButton,
              currentLanguage === language.code && styles.selectedLanguage
            ]}
            onPress={() => handleSwitchLanguage(language.code)}
          >
            <Text style={[
              styles.languageText,
              currentLanguage === language.code && styles.selectedLanguageText
            ]}>
              {language.name}
            </Text>
          </TouchableOpacity>
        ))}
      </View>
      
      <TouchableOpacity style={styles.logoutButton} onPress={handleLogout}>
        <Text style={styles.logoutText}>{t('logout')}</Text>
      </TouchableOpacity>
    </DrawerContentScrollView>
  );
};

const styles = StyleSheet.create({
  drawerContainer: {
    flex: 1,
  },
  header: {
    padding: 20,
    backgroundColor: '#2196F3',
  },
  username: {
    color: 'white',
    fontSize: 18,
    fontWeight: 'bold',
  },
  drawerItems: {
    flex: 1,
    paddingTop: 10,
  },
  languageSection: {
    padding: 20,
    borderTopWidth: 1,
    borderTopColor: '#eee',
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 10,
    color: '#333',
  },
  languageButton: {
    paddingVertical: 10,
    paddingHorizontal: 15,
    marginVertical: 5,
    borderRadius: 5,
    backgroundColor: '#f5f5f5',
  },
  selectedLanguage: {
    backgroundColor: '#2196F3',
  },
  languageText: {
    fontSize: 16,
    color: '#333',
  },
  selectedLanguageText: {
    color: 'white',
  },
  logoutButton: {
    margin: 20,
    padding: 15,
    backgroundColor: '#ff4444',
    borderRadius: 5,
    alignItems: 'center',
  },
  logoutText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default CustomDrawerContent;